<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let person = {
        name: "张三",
        age: 18,
      };
      // vue2中实现响应式
      /* let p = {};
      Object.defineProperty(p, "name", {
        configurable: true,
        get() {
          return person.name;
        },
        set(value) {
          console.log("修改了name的属性");
          person.name = value;
        },
      });
      Object.defineProperty(p, "age", {
        configurable: true,
        get() {
          return person.age;
        },
        set(value) {
          console.log("修改了age的属性");
          person.age = value;
        },
      }); */

      //模拟Vue3中实现响应式
      const p = new Proxy(person, {
        // 读取
        get(target, propName) {
          console.log(`有人读取了p身上的${propName}属性`);
          return Reflect.get(target, propName);
        },
        //修改、追加
        set(target, propName, value) {
          console.log(`有人修改了p身上的${propName}属性`);
          Reflect.set(target, propName, value);
        },
        //删除
        deleteProperty(target, propName) {
          console.log(`有人删除了p身上的${propName}属性`);
          return Reflect.deleteProperty(target, propName);
        },
      });

      /* let obj = { a: 1, b: 2 };
      const x1 = Reflect.defineProperty(obj, "c", {
        get() {
          return 3;
        },
      });
      console.log(x1);
      const x2 = Reflect.defineProperty(obj, "c", {
        get() {
          return 4;
        },
      });
      console.log(x2); */
    </script>
  </body>
</html>
